<template>
  <div class="count-resources-config">
    <el-row :style="{ height: '100%' }" :gutter="10">
      <el-col :span="12">
        <el-card :style="{ height: '100%' }">
          <template #header>
            <div class="card-header">
              <div class="card-title-box">
                <div class="go-back" @click="goBack"><span class="back-icon-new"></span> 返回</div>
                <span class="card-font">节点管理</span>
              </div>
            </div>
          </template>
          <NodeManage />
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card :style="{ height: '100%' }">
          <template #header>
            <div class="card-header">
              <span class="card-font">模型计算配置</span>
            </div>
          </template>
          <model-count-config /> </el-card
      ></el-col>
    </el-row>
  </div>
</template>
<script setup>
import { ref, reactive } from 'vue'
import NodeManage from './cpns/nodeManage/index.vue'
import ModelCountConfig from './cpns/model-count-config/index.vue'

import emitter from '@/utils/bus'

const goBack = () => {
  emitter.emit('goback', true)
}
</script>
<style lang="less" scoped>
.count-resources-config {
  width: 100%;
  height: 100%;
  position: relative;
  background-color: white;
  :deep(.el-card__body) {
    padding: 10px;
    height: calc(100% - 50px);
  }
  // .card-body {
  //   height: calc(100% - 30px);
  //   background-color: red;
  // }
  .card-font {
    height: 30px;
    line-height: 30px;
  }
  .card-title-box {
    display: flex;
    align-items: center;
    .go-back {
      display: flex;
      align-items: center;
      margin-right: 20px;
      color: var(--el-color-primary);
      cursor: pointer;
      font-size: 16px;
      .back-icon-new {
        display: inline-block;
        width: 30px;
        height: 30px;
        margin-right: 5px;
        background: url('@/assets/images/basicsConfig/u78.png') no-repeat;
        background-size: 100% 100%;
      }
    }

    // display: flex;
    // align-items: center;
    // .page-back-box {
    //   margin-left: 50px;
    // }
  }
}
</style>
